<template>
  <div>
    <div>
      <h1>Element UI 表格高度拖拽调整示例</h1>
      <p>通过拖拽表格下方的手柄来调整表格高度</p>
      <div class="">
        <!-- 表格容器 -->
        <div ref="tableContainer" @wheel="handleWheel">
          <el-table :data="tableData" stripe :style="'overflow-y: auto; height: ' + tableHeight + 'px'">
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址" width="180"></el-table-column>
            <el-table-column prop="address" label="地址" width="180"></el-table-column>
            <el-table-column prop="address" label="地址" width="180"></el-table-column>
            <el-table-column prop="address" label="地址" width="180"></el-table-column>
            <el-table-column prop="address" label="地址" width="180"></el-table-column>
            <el-table-column prop="address" label="地址" width="180"></el-table-column>
          </el-table>
        </div>
        <!-- 拖拽手柄 -->
        <div ref="resizeHandle" class="resize-handle w-full flex items-center justify-center">
          <!-- <i class="fa fa-arrows-h text-gray-400"></i> -->
        </div>
      </div>
    </div>

    <div class="bg-white rounded-lg shadow-md p-6">
      <h2 class="text-xl font-semibold text-gray-800 mb-4">表格信息</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gray-50 p-4 rounded-lg">
          <p class="text-gray-500 text-sm mb-1">当前表格高度</p>
          <p class="text-lg font-semibold text-primary">{{ tableHeight }}px</p>
          <p class="text-lg font-semibold text-primary">{{ scrollPosition }}滚动条距离</p>
        </div>
        <div class="bg-gray-50 p-4 rounded-lg">
          <p class="text-gray-500 text-sm mb-1">调整提示</p>
          <p class="text-gray-700">拖拽下方的灰色区域可以调整表格高度</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: Array.from({ length: 50 }, (_, i) => ({
        date: `2023-05-${i % 31 + 1}`,
        name: `姓名${i + 1}`,
        address: `上海市普陀区金沙江路${i + 1}号`,
      })),
      tableHeight: 400,
      isResizing: false,
      startY: 0,
      startHeight: 0,
      scrollPosition: 0
    };
  },
  mounted() {
    // 设置初始表格高度
    this.$refs.tableContainer.style.height = `${this.tableHeight}px`;

    // 添加事件监听器
    this.$refs.resizeHandle.addEventListener('mousedown', this.onMouseDown);
    document.addEventListener('mousemove', this.onMouseMove);
    document.addEventListener('mouseup', this.onMouseUp);

    // 设置表格最小宽度，确保需要横向滚动
    this.$nextTick(() => {
      const tableEl = this.$refs.tableContainer.querySelector('.el-table__body-wrapper');
      if (tableEl) {
        tableEl.style.minWidth = '1200px';
      }
    });
  },
  beforeDestroy() {
    // 移除事件监听器防止内存泄漏
    this.$refs.resizeHandle.removeEventListener('mousedown', this.onMouseDown);
    document.removeEventListener('mousemove', this.onMouseMove);
    document.removeEventListener('mouseup', this.onMouseUp);
  },
  methods: {
    onMouseDown(e) {
      this.isResizing = true;
      this.startY = e.clientY;
      this.startHeight = this.$refs.tableContainer.offsetHeight;

      // 改变鼠标样式
      document.body.style.cursor = 'row-resize';
      this.$refs.resizeHandle.style.backgroundColor = '#e0e0e0';
    },

    onMouseMove(e) {
      if (!this.isResizing) return;

      // 计算高度变化
      const deltaY = e.clientY - this.startY;
      const newHeight = this.startHeight + deltaY;

      // 设置最小高度限制
      if (newHeight >= 200) {
        this.tableHeight = newHeight;
        this.$refs.tableContainer.style.height = `${this.tableHeight}px`;
      }
    },

    onMouseUp() {
      this.isResizing = false;

      // 恢复鼠标样式
      document.body.style.cursor = '';
      this.$refs.resizeHandle.style.backgroundColor = '';
    },
    // 控制滚轮
    handleWheel(e) {
      // 只处理有水平滚动条的情况
      const tableWrapper = this.$refs.tableContainer.querySelector('.el-table__body-wrapper');
      if (!tableWrapper || tableWrapper.scrollWidth <= tableWrapper.clientWidth) {
        return;
      }

      // 阻止默认的垂直滚动行为
      e.preventDefault();

      // 根据滚轮方向计算水平滚动距离
      const delta = e.deltaY * -1;

      // 应用滚动增量
      tableWrapper.scrollBy({
        left: delta,
        behavior: 'smooth'
      });

      // 更新滚动位置显示
      this.scrollPosition = Math.round(tableWrapper.scrollLeft);
    }
  }
};
</script>
<style type="text/tailwindcss">
.content-auto {
  content-visibility: auto;
}

.resize-handle {
  height: 8px;
  background-color: #f0f0f0;
  cursor: row-resize;
  transition: background-color 0.2s;
}

.resize-handle:hover {
  background-color: #e0e0e0;
}

.el-table-container {
  transition: height 0.2s ease;
}
</style>